<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>Document</title>
</head>
<style>
*{
  margin:0px;
  padding:0px;
}
.banner{
    max-width: 500px;
    min-height: 100px;
    margin: 0 auto;
}
img{
  width:100%;
  padding:7px;
  box-sizing:border-box;
}
.clearfix:after{
  content:"";
  display:table;
  clear:both;
}
.fl{
  float:left;
}
.fr{
  float:right;
}  
.pic{
  width:15%;
}
.right{
  width:85%;
  padding:5px;
  box-sizing:border-box;
}
.pname a{
  color:rgb(94,111,148);
  text-decoration:none;
  font-weight:900;
}
.ptxt{
  margin:8px auto;
}
.imgs .img{
  width:31%;
  background:url("img/2.jpg") no-repeat center center;
  height:100px; 
  background-size:110%;
  margin:2px;
}
.imgs .img:nth-of-type(2){
  background:url("img/3.jpg") no-repeat center center;
  background-size:110%;
}
.imgs .img:nth-of-type(3){
  background:url("img/4.jpg") no-repeat center center;
  background-size:110%;
}
.bot{
  margin-top:8px;
}
.time{
  font-size:12px;
  color:rgb(152,152,152);
}
.more{
  width:36px;
  height:24px;
  background:rgb(248,248,248);
  margin-right:5spx;
  border-radius:3px;
}
.more{
  text-align:center;
  padding-top:11px;
  box-sizing:border-box;
}
.more span{
  display:inline-block;
  margin:0px 2px;
  width:4px;
  height:4px;
  background:rgb(88,107,149);
  border-radius:100%;
}
</style>
<body>
<div class="banner">
  <a href="index.html">作业一</a>
  <a href="homework.html">作业二</a>
    <div class="box clearfix">

        <div class="pic fl">
          <img src="img/1.jpg" />
        </div>
      
        <!-- right开始 -->
        <div class="right fl">
          <div class="pname">
            <a href="#">浩</a>
          </div>
          <div class="ptxt">
            开学一切准备妥当
          </div>
          <div class="imgs clearfix">
            <div class="img fl"></div>
            <div class="img fl"></div>
            <div class="img fl"></div>
          </div>
          <div class="bot clearfix">
            <div class="time fl">50分钟前</div>
            <div class="more fr">
              <span></span><span></span>
            </div>
          </div>
        </div>
        <!-- right结束 -->
      
      </div>
</div>
</body>
</html>
